<template>
	<view>
		<!--左侧数据-->
		<scroll-view 
			scroll-y="true" 
			@scroll='scroll'
			:scroll-into-view='aId'
			style='height: 200rpx;'
		>
			<view>
				<view
					v-for='(item,index) in list' 
					:key='index'
					:id='`a${index}`'
					class='scroll-item'
				>
					<slot 
						name='index-list'
						:listKey='item.letter'
						:listArr='item.data'
					></slot>
				</view>
			</view>
		</scroll-view>
		
		<!--索引-->
		<view class='sxs-index'>
			<view 
				v-for='(item,index) in list' 
				:key='index'
				:class='index==current?"active":""'
				@click='eventIndex(index)'
			>
				<text>{{item.letter}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
export default{
	props:{
		list:{
			type:Array,
			default(){ return [] }
		}
	},
	data () {
		return {
			current:Number.MAX_VALUE,
			scrollTop:[],
			aId:'a0'
		}
	},
	mounted(){
		this.$nextTick(()=>{
			
			document.getElementsByClassName('scroll-item').forEach(v=>{
				this.scrollTop.push( v.offsetTop + 480 );
			})
			
			// uni.createSelectorQuery().selectAll('.scroll-item').boundingClientRect(res=>{
			// 	console.log( 111,res );
			// 	this.scrollTop = res.map(v=>v.top);
			// }).exec();
		})
	},	
	methods:{
		//点击索引
		eventIndex( index ){
			this.aId = `a${index}`;
			this.current = index;
			//1. 把每一个左侧元素的offset偏移量拿到
			uni.createSelectorQuery().select(`#${this.aId}`).boundingClientRect(res=>{
				//2. 去设置窗口scroll=当前点击的元素的offset
				uni.pageScrollTo({
					scrollTop:res.top,
					duration:100
				})
			}).exec();
			
			// let dom = document.getElementById(`a${index}`)
			// uni.pageScrollTo({
			// 	scrollTop:dom.offsetTop + 480,
			// 	duration:100
			// })
			
		},
		//滚动事件
		scroll( e ){
			let scrollTop = e.detail.scrollTop + 500;
			const index = this.scrollTop.findIndex(item=> scrollTop<=item );
			this.current = index;
			console.log( this.current );
		}
	}
}
</script>

<style>
.sxs-index{
	position: fixed;
	right:20rpx;
	top:50%;
	transform: translateY(-50%);
}
.active{
	background-color: blue;
}
</style>